<!DOCTYPE html>
<html>

<head>
    <title>valiDate入门</title>
    <style>
        label.error {
            padding-left: 30px;
            font-family: georgia;
            font-size: 15px;
            font-style: normal;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <!--引入validate插件js文件-->
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <!--引入国际化js文件-->
    <script type="text/javascript" src="js/messages_zh.js"></script>

    <script>
        $(function () {
            $("#checkForm").validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 6
                    },
                    password: {
                        required: true,
                        digits: true,
                        minlength: 6
                    }
                }, messages: {
                    username: {
                        required: "用户名不能为空!",
                        minlength: "用户名不得少于6位!"
                    },
                    password: {
                        required: "密码不能为空!",
                        digits: "密码必须是整数!",
                        minlength: "密码不得少于6位!"
                    }
                }
            });
        });
    </script>
</head>

<body>
    <form action="#" id="checkForm">
        用户名: <input type="text" name="username" /> <br />
        密码: &nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password" /> <br />
        <input type="submit" />
    </form>

</body>

</html>